<!--
 * @Author: your name
 * @Date: 2021-03-16 15:09:41
 * @LastEditTime: 2022-02-02 16:44:17
 * @LastEditors: 晟松
 * @Description: In User Settings Edit
 * @FilePath: \volunteer-vue3-admin\src\components\dashboard\LiveChart.vue
-->
<template>
    <div v-resize="myChart && myChart.resize" style="height: 400px; margin-top: 20px" ref="liveChart"></div>
</template>

<script setup>
// 这种echrts引入方式是按需引入
import * as echarts from "echarts/core";
import { TitleComponent, TooltipComponent, GridComponent } from "echarts/components";
import { BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import * as dayjs from "dayjs";
import { unwarp } from "@/utils";
import { onBeforeMount, onMounted, ref, computed, reactive } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { getAllResident } from "@/myApi/community";
import { getAllStudent, getAllCollegeStudent, getAllCollegeAdmin } from "@/myApi/school";
import { getCollegeAllStudentVol, getAllResidentVol } from "@/myApi/vol";
import { getAllSchool, getAllCommunity } from "../../myApi/user";

const store = useStore();
const router = useRouter();

echarts.use([TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]);
const liveChart = ref(null);
const myChart = ref(null);

let identity = computed(() => store.getters.identity);
// console.log("identity: ", identity.value);
let userAdmin = computed(() => store.getters.user);
let isSchoolAdmin = computed(() => store.getters.schoolAdmin);

let allVol = reactive({});
let allData = reactive({});
let option = reactive({ data: {} });
onBeforeMount(async () => {
    if (identity.value == "school" && !isSchoolAdmin.value) {
        allVol = await getCollegeAllStudentVol({ id: userAdmin.value.id });
    } else if (identity.value == "community") {
        allVol = await getAllResidentVol({ id: userAdmin.value.id });
    } else if (identity.value == "school" && isSchoolAdmin.value) {
        // 校级管理员
        allVol = await getAllCollegeAdmin({ id: userAdmin.value.id });
    }
    console.log("allVol: ", allVol);
    allData = sortByTime(allVol.data.pureAllVol);
    console.log("allData: ", allData, Object.keys(allData), Object.values(allData));

    option.data = {
        title: {
            text: "志愿服务记录",
        },
        grid: {
            left: "0",
            right: "0",
            top: "10%",
            bottom: "0",
            containLabel: true,
        },
        tooltip: {
            trigger: "axis",
        },
        xAxis: {
            data: Object.keys(allData),
        },
        yAxis: {
            type: "value",
        },
        series: [
            {
                data: Object.values(allData),
                type: "bar",
                showBackground: true,
                backgroundStyle: {
                    color: "rgba(180, 180, 180, 0.2)",
                },
            },
        ],
    };

    myChart.value = echarts.init(liveChart.value);
    getNewData(myChart);
});

/**
 * @description: 对数据按时间计数
 * @param {*} data是一个数组
 * @return {*}
 */
function sortByTime(data) {
    let map = {};
    for (let i = 0; i < data.length; i++) {
        let vol = data[i];
        let time = dayjs(vol.updatedAt).format("MM-DD");
        if (map[time]) {
            map[time]++;
        } else {
            map[time] = 1;
        }
    }
    return map;
}
/**
 * @description: 生成15条数据
 * @param {*}
 * @return {*}
 */
const dataList = () => {
    let date = [];
    let num = [];
    let nowTime = new Date().getTime();
    for (let i = 0; i < 15; i++) {
        date.push(dayjs(nowTime - i * 1000 * 60 * 60 * 24).format("MM-DD"));
        num.push((Math.random() * 10).toFixed(0) * 1);
    }
    return {
        date: date.reverse(),
        num,
    };
};
// let $_dataList = dataList();
// console.log("_dataList: ", $_dataList);

/**
 * @description: 动态数据
 * @param {*}
 * @return {*}
 */
const getNewData = (myChart) => {
    unwarp(myChart.value).setOption(option.data);
    // 这里就一直更新数据，实际上没必要
    // setInterval(() => {
    //     $_dataList.date.shift();
    //     $_dataList.num.shift();
    //     $_dataList.date.push(dayjs(new Date().getTime()).format("MM-DD"));
    //     $_dataList.num.push((Math.random() * 10).toFixed(0) * 1);
    //     unwarp(myChart.value).setOption(option);
    // }, 10000);
};
// onMounted(() => {
// myChart.value = echarts.init(liveChart.value);
// getNewData(myChart);
// });
</script>

<style lang="scss" scoped></style>
